<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
    <title>mapTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper-4.3.3.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/rem.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=204aa4825264b2aa79ed71555f882d84"></script>
    <style>
        #mapBox {
            width: 7.5rem;
            height: 100%;
            left: 50%;
            margin-left: -3.75rem;
            background: #4A4A4A;
            position: absolute;
        }
    </style>
    <style>

        /*<!--地图自带marker样式修改-->*/
        .amap-marker-content {
            /*width: 28px;*/
            /*height: 32px;*/
        }

        /*去掉高德地图logo 和版本号*/
        .amap-logo {
            opacity: 0;
        }

        .amap-copyright {
            opacity: 0;
        }

        .amap-icon img {
            width: 100%;

        }

    </style>
</head>
<body>

<div id="mapBox">


</div>

<div id="select-btn">
    <div class="select-btn-item gongdian-btn active">
        <i></i>
        <p>宫殿</p>
    </div>
    <div class="select-btn-item repast-btn">
        <i></i>
        <p>餐饮</p>
    </div>
    <div class="select-btn-item shop-btn">
        <i></i>
        <p>商店</p>
    </div>
    <div class="select-btn-item toilet-btn">
        <i></i>
        <p>卫生间</p>
    </div>
    <div class="select-btn-item rests-btn">
        <i></i>
        <p>其他</p>
    </div>
</div>

<div id="map-big" class="map-common-btn">
    <img class="icon-big" src="./images/icon_big@3x.png" alt="">
    <img class="icon-small" src="./images/btn_small@3x.png" alt="">
</div>


</body>
</html>
<script src="./js/jquery-1.11.3.min.js"></script>

<script>
    //定义路径变量，用于地图图片加载
    var curPath = location.origin;
    //console.log(curPath);


    //设置地图背景
    var imageLayer = new AMap.ImageLayer({
        //url: 'http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg',
        url: `${curPath}/mapTest/images/map.png`,
        bounds: new AMap.Bounds(
            [116.392435, 39.910186], [116.401441, 39.922796]//参数为西南，东北（及地图右下角到左上角）
        ),
    });

    //地图
    var map = new AMap.Map('mapBox', {
        resizeEnable: true,
        center: [116.397016, 39.918038],//中心点坐标
        //viewMode:'3D'//使用3D视图
        showLabel: false, //不显示地图文字标记
        zooms: [16, 20],
        zoom: 16,
        layers: [
            new AMap.TileLayer(),
            imageLayer
        ],
        //baseRender:'d'//强制栅格图
        //rotateEnable:true//地图是否可旋转，3D视图默认为true，2D视图默认false。
    });

    //map.setRotation(0.5); //旋转地图


    //地图显示区域设置
    console.log(map.getBounds());
    var bounds = map.getBounds();
    map.setBounds(bounds);
    map.setLimitBounds(bounds);

    //判断缩放级别
    map.on('zoomend', function () {
        var curZoom = map.getZoom();

        if (curZoom == 16) {
            $(".architecture-marker").addClass("show");
            $("#map-big").removeClass("active");

            $(".amap-marker").hide();
            $(".amap-marker").each(function () {
                if ($(this).find(".amap-icon").length > 0) {
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            });
        } else {
             $("#map-big").addClass("active");
             //$(".amap-marker").hide();
            // $(".architecture-marker[group='宫殿']").parents(".amap-marker").show();
            // $(".architecture-marker[group='宫殿']").addClass("show");
        }
        console.log(curZoom);
    });





    //显示marker
    var marker;
    var mapObj;
    $.ajax({
        url: 'js/mapData.json',
        dataType: 'text',
        success: function (data) {
            mapObj = JSON.parse(data);
            // console.log(JSON.parse(data));
            console.log(mapObj);

            
            function addMarker(obj,iconName) {
                for (let j = 0; j < obj.data.length; j++) {
                    // 点标记显示内容，HTML要素字符串

                    if (obj.data[j].recommend == "0") {
                        var content =
                            '<div class="architecture-marker" id="'+obj.data[j].id+'" group="'+obj.group_name+'">' +
                            '   <img class="architecture-icon" src="'+curPath+'/mapTest/images/'+iconName+'.png">' +
                            '   <div class="imgMarker-name noRecommend">' +
                            '       <div class="core">'+obj.data[j].name+'<p class="v-arrow">〉</p></div>' +
                            '   </div>' +
                            '</div>';
                    }else {

                        var content =
                            '<div class="architecture-marker" id="'+obj.data[j].id+'" group="'+obj.group_name+'">' +
                            '   <img class="architecture-icon" src="'+curPath+'/mapTest/images/'+iconName+'.png">' +
                            '   <div class="imgMarker-name active">' +
                            '       <div class="core">'+obj.data[j].name+'<p class="v-arrow">〉</p></div>' +
                            '   </div>' +
                            '</div>';
                    }
                    marker = new AMap.Marker({
                        position: obj.data[j].lnglat,
                        content: content,
                        map: map,
                        offset: new AMap.Pixel(-14, -32)
                    });
                    markers.push(marker);
                    map.add(marker);
                }
            }
            
            
            var markers = [];
            for (let i = 0; i < mapObj.length; i++) {
                if (mapObj[i].group_name == "八大殿") {//八大殿
                    for (let j = 0; j < mapObj[i].data.length; j++) {
                        // 创建一个 icon

                        var imgIcon = new AMap.Icon({
                            size: new AMap.Size(30, 97),
                            image: curPath + "/mapTest/images/" + mapObj[i].data[j].imgName + ".png",
                            imageSize: AMap.Size(87, 282),
                            //imageOffset: new AMap.Pixel(-95, -3)
                        });
                        // 将 icon 传入 marker
                        var imgMarker = new AMap.Marker({
                            position: mapObj[i].data[j].lnglat,
                            icon: imgIcon,
                            offset: new AMap.Pixel(-15, -50),
                            cursor: "default"
                        });

                        map.add(imgMarker);

                         imgMarker.on('click', markerClick);
                         imgMarker.on('touchend', markerClick);

                    }
                }

                if (mapObj[i].group_name == "卫生间") {//卫生间 weishengjian
                    addMarker(mapObj[i],"weishengjian");
                }
                if (mapObj[i].group_name == "其他") {//其他 qitaIcon
                    addMarker(mapObj[i],"qitaIcon");
                }
                if (mapObj[i].group_name == "商店") {//商店 shangpian
                    addMarker(mapObj[i],"shangpian");
                }
                if (mapObj[i].group_name == "餐饮") {//餐饮 canyin
                    addMarker(mapObj[i],"canyin");
                }
                if (mapObj[i].group_name == "宫殿") {//宫殿 jianzhu
                    addMarker(mapObj[i],"jianzhu");
                }
            }
        }
    });


    //八大殿点击
    function markerClick(e) {
        e = e || window.event;
        //设置当前位置为中心

        map.setCenter(e.target.getPosition());
        //放大地图
        map.setZoom(17);

        //console.log(e.target.getPosition());
        $("#map-big").addClass("active");
        $(".amap-marker").hide();
        $(".architecture-marker[group='宫殿']").parents(".amap-marker").show();
        $(".architecture-marker[group='宫殿']").addClass("show");

    }


    window.onload = function () {

        //加载默认显示八大殿
        $(".amap-marker").each(function () {
            if ($(this).find(".amap-icon").length > 0) {
                console.log("我是八大殿");
            }
            else {
                $(this).hide();
            }
        });


    };
    //地图marker 类型筛选
    $(".select-btn-item").on("click", function () {

        var curZoom = map.getZoom();


        if (curZoom == 16) {//放大
            map.setZoom(17);
        }

        $(this).addClass("active").siblings().removeClass("active");

        $(".amap-marker").hide();
        $(".architecture-marker").addClass("show");
        var curGroup = $(this).find("p").html();
        $(".architecture-marker[group='"+curGroup+"']").parents(".amap-marker").show();
    });

    //地图marker点击
    $(document).on("click touchend", ".architecture-icon", function (e) {
        e = e || window.event;

        /*if(isSmallMap){//小地图点击

        }else {//放大后的marker点击*/
        //当前显示最上层
        if ($(this).siblings(".imgMarker-name").hasClass("noRecommend")) {

            //当前显示name 其他不显示
            $(".amap-marker").find(".noRecommend").removeClass("active");

            $(this).siblings(".imgMarker-name").addClass("active");
        } else {

        }

        $(this).parents(".amap-marker").addClass("markerIndex").siblings().removeClass("markerIndex");


        //$(this).parents(".architecture-marker").siblings(".architecture-marker").children(".noRecommend").removeClass("active");


        //}

    });

    //放大/缩小地图
    $("#map-big").on("click", function () { //大


        $(".architecture-marker").addClass("show");

        if ($(this).hasClass("active")) {//缩小
            $(this).toggleClass("active");
            map.setCenter([116.397016, 39.918038]);
            map.setZoom(16);
            $(".amap-marker").hide();
            $(".amap-marker").each(function () {
                if ($(this).find(".amap-icon").length > 0) {
                    $(this).show();
                }
                else {
                    $(this).hide();
                }
            });

        }
        else {//放大
            $(this).toggleClass("active");
            map.setZoom(17);

            //判断筛选的是哪个类型，就显示哪个类型 //如果没有就默认显示宫殿

            if ($("#select-btn").find(".active").length > 0){

                 $(".amap-marker").hide();
                $(".architecture-marker").addClass("show");
                var curGroup = $("#select-btn .active").find("p").html();
                $(".architecture-marker[group='"+curGroup+"']").parents(".amap-marker").show();


            }else {

                $(".amap-marker").hide();
                $(".architecture-marker[group='宫殿']").parents(".amap-marker").show();
                $(".architecture-marker[group='宫殿']").addClass("show");
            }

        }

    });


</script>

